<template>
  <transition name="scale">
    <div class="yt-x-tip" v-show="state" :style="{'z-index': index}">
      <span>{{content}}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'tip'
}
</script>

<style scoped lang="less">
  .scale-enter-active {
    animation-name: fold-out;
    animation-duration: .2s;
  }
  @keyframes fold-out {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  .yt-x-tip{
    z-index: 1000001;
    position: fixed;
    width: 5rem;
    text-align: center;
    line-height: .92rem;
    color: #fff;
    border-radius: .04rem;
    left: 50%;
    margin-left: -2.5rem;
    top: 50%;
    margin-top: -.46rem;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    span{
      font-size: .28rem;
      height: .92rem;
      line-height: .92rem;
      padding: 0 .4rem;
      display: inline-block;
      min-width: 3.2rem;
      background: rgba(0,0,0,.7);
    }
  }
</style>
